<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
	<head>
		<base href="<%=basePath%>">
		<title>小说详情页</title>
		<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
		<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
			  rel="stylesheet"/>
		<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
		<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
		<script type="text/javascript"
				src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
		<script type="text/javascript"
				src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
		<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
		<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
		<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>
		<script>

            $(function () {

                //日历的控件
                $(".time").datetimepicker({
                    minView: "month",
                    language: 'zh-CN',
                    format: 'yyyy-mm-dd',
                    autoclose: true,
                    todayBtn: true,
                    pickerPosition: "bottom-left"
                });

                //为全选复选框绑定事件
                $("#qx").click(function () {
                    $("input[name=xz]").prop("checked", this.checked)
                })

                $("#chapterBody").on("click", $("input[name=xz]"), function () {
                    $("#qx").prop("checked", $("input[name=xz]").length === $("input[name=xz]:checked").length);
                })

                pageList(1, 2);

                //为查询按钮绑定事件
                $("#searchBtn").click(function () {
                    /*
                    	点击查询按钮的时候,我们应该将搜索框中的信息保存起来,保存到隐藏域中
                     */
                    $("#hidden-chapterId").val($.trim($("#chapterId").val()));
                    pageList(1, 2);
                    //然后将搜索框中的数据清空
                    $("#chapterId").val("");
                })

                //为创建章节按钮绑定事件
                $("#addBtn").click(function () {
                    $("#createChapterModal").modal("show");

                })

                //为绑定事件执行添加操作
                $("#saveBtn").click(function () {

                    $.ajax({
                        url: "chapter/save.do",
                        data: {
							"novelid":"${n.id}",
                            "name": $.trim($("#name").val()),
                            "content": $.trim($("#content").val()),

                        },
                        type: "post",
                        dataType: "json",
                        success: function (data) {

                            if (data) {
                                //添加成功后
                                //做完添加操作后,应该回到第一页,维持每页展现的记录数
                                pageList(1, $("#chapterPage").bs_pagination('getOption', 'rowsPerPage'));
                                //清空添加操作模态窗口中的数据

                                $("#chapterAddForm")[0].reset();

                                //关闭添加操作的模态窗口
                                $("#createChapterModal").modal("hide");

                            } else {
                                alert("添加章节失败")
                            }

                        }
                    })
                })

                //为删除按钮绑定事件,执行小说章节删除操作
                $("#deleteBtn").click(function () {

                    //找到复选框中所有挑勾的复选框的jquery
                    var $xz = $("input[name=xz]:checked");

                    if ($xz.length === 0) {
                        alert("请选择需要删除的记录");
                        //肯定选了,而且有可能是1条,有可能是多条
                    } else {

                        if (confirm("确定删除所选中的记录吗?")) {

                            //url:chapter/delete.do?id=xxx$id=xxx

                            //拼接参数
                            var param = "";

                            //将$xz中的每一个dom对象,取其value值,就相当于取得了需要删除的记录的id
                            for (var i = 0; i < $xz.length; i++) {
                                //$xz[i].value;
                                param += "id=" + $($xz[i]).val();

                                //如果不是最后一个元素,需要在后面追加一个&符号
                                if (i < $xz.length - 1) {
                                    param += "&";
                                }
                            }
                            //alert(param);
                            $.ajax({
                                url: "chapter/delete.do",
                                data: param,
                                type: "post",
                                dataType: "json",
                                success: function (data) {
                                    if (data) {
                                        //删除成功后
                                        //做完删除操作后,应该回到第一页,维持每页展现的记录数
                                        pageList(1, $("#chapterPage").bs_pagination('getOption', 'rowsPerPage'));

                                    } else {
                                        alert("小说章节删除失败");
                                    }
                                }
                            })
                        }
                    }
                })

                //为修改按钮绑定事件,打开修改操作的模态窗口
                $("#editBtn").click(function () {

                    var $xz = $("input[name=xz]:checked");

                    if ($xz.length === 0) {
                        alert("请选择需要修改的记录")
                    } else if ($xz.length > 1) {
                        alert("只能选择一条记录进行修改");

                        //肯定只选了一条
                    } else {
                        var id = $xz.val();

                        $.ajax({
                            url: "chapter/getChapterAll.do",
                            data: {
                                "id": id
                            },
                            type: "get",
                            dataType: "json",
                            success: function (data) {
                                //处理单条chapter
                                $("#edit-name").val(data.name);
                                $("#edit-content").val(data.content);
                                $("#edit-id").val(data.id);

                                //所有值都处理完毕后,打开修改操作的模态窗口
                                $("#editChapterModal").modal("show");
                            }
                        })
                    }
                })

                //为更新按钮绑定事件,执行小说章节修改操作
                /*
					在实际项目开发中,一定是按照先做添加,再做修改的这种顺序
					所以,为了节省开发时间,修改操作一般都是copy添加操作
				 */
                $("#updateBtn").click(function () {
                    $.ajax({
                        url: "chapter/update.do",
                        data: {

                            "id": $.trim($("#edit-id").val()),
                            "name": $.trim($("#edit-name").val()),
                            "content": $.trim($("#edit-content").val()),
                        },
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            /*
                            	data
                            		{"success":true/false}
                             */
                            if (data) {
                                //修改成功后
                                //刷新小说章节信息列表(局部刷新)
                                //pageList(1,2);
                                /*
									修改操作后,应该维持在当前页,维持每页展现的记录数
								 */
                                pageList($("#chapterPage").bs_pagination('getOption', 'currentPage')
                                    , $("#chapterPage").bs_pagination('getOption', 'rowsPerPage'));

                                //关闭修改操作的模态窗口
                                $("#editChapterModal").modal("hide");

                            } else {
                                alert("修改小说章节失败")
                            }

                        }
                    })
                })




            })


            function pageList(pageNo, pageSize) {

                //查询前,将隐藏域中保存的信息取出来,重新赋予到搜索框中
                $("#chapterId").val($.trim($("#hidden-chapterId").val()));

                $.ajax({
                    url: "novel/pageList.do",
                    data: {
                        "pageNo": pageNo,
                        "pageSize": pageSize,
                        "novelId": "${n.id}",
                        "id": $.trim($("#chapterId").val()),
                    },
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        var html = "";
                        $.each(data.dataList, function (i, n) {
                            html += '<tr>';
                            html += '<td><input type="checkbox" id="qx" name="xz" value="' + n.id + '"/></td>';
                            html += '<td id="' + n.novelid + '">' + n.name + '</td>';
                            html += '<td>' + n.content + '</td>';
                            html += '<td>' + n.createtime + '</td>';
                            html += '</tr>';
                        })

                        $("#chapterBody").html(html);

                        //计算总页数
                        var totalPages = data.total % pageSize === 0 ? data.total / pageSize : parseInt(data.total / pageSize) + 1;

                        //数据处理完毕后,结合分页插件对前端展现分页相关的信息
                        $("#chapterPage").bs_pagination({
                            currentPage: pageNo, // 页码
                            rowsPerPage: pageSize, // 每页显示的记录条数
                            maxRowsPerPage: 20, // 每页最多显示的记录条数
                            totalPages: totalPages, // 总页数
                            totalRows: data.total, // 总记录条数

                            visiblePageLinks: 3, // 显示几个卡片

                            showGoToPage: true,
                            showRowsPerPage: true,
                            showRowsInfo: true,
                            showRowsDefaultInfo: true,

                            //该回调函数是在,点击分页组件的时候触发的
                            //pageList方法调用的是自己写的方法,但是里面的参数,是分页插件提供的,不能碰
                            onChangePage: function (event, data) {
                                pageList(data.currentPage, data.rowsPerPage);
                            }
                        });

                    }
                })
            }
		</script>
	</head>
	<body>

		<!-- 创建小说章节的模态窗口 -->
		<div class="modal fade" id="createChapterModal" role="dialog">
			<div class="modal-dialog" role="document" style="width: 85%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title" id="myModalLabel1">创建小说章节</h4>
					</div>
					<div class="modal-body">

						<form id="chapterAddForm" class="form-horizontal" role="form">
							<div class="form-group">
								<label for="name" class="col-sm-2 control-label">章节名</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control" id="name">
								</div>
							</div>

							<div class="form-group">
								<label for="content" class="col-sm-6 control-label">内容<span
										style="font-size: 15px; color: red;">*</span></label>
								<div class="col-sm-10" style="width: 81%;">
									<textarea class="form-control" rows="6" id="content"></textarea>
								</div>
							</div>

						</form>

					</div>
					<div class="modal-footer">
						<!--
							data-dismiss="modal:关闭模态窗口
						-->
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="saveBtn">保存</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 修改小说章节的模态窗口 -->
		<div class="modal fade" id="editChapterModal" role="dialog">
			<div class="modal-dialog" role="document" style="width: 85%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title" id="myModalLabel2">创建小说章节</h4>
					</div>
					<div class="modal-body">

						<form class="form-horizontal" role="form">
							<input type="hidden" id="edit-id">
							<div class="form-group">
								<label for="edit-name" class="col-sm-2 control-label">章节名</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control" id="edit-name">
								</div>
							</div>

							<div class="form-group">
								<label for="edit-content" class="col-sm-6 control-label">内容<span
										style="font-size: 15px; color: red;">*</span></label>
								<div class="col-sm-10" style="width: 81%;">
									<textarea class="form-control" rows="6" id="edit-content"></textarea>
								</div>
							</div>

						</form>

					</div>
					<div class="modal-footer">
						<!--
							data-dismiss="modal:关闭模态窗口
						-->
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="updateBtn">更新</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 返回按钮 -->
		<div style="position: relative; top: 35px; left: 10px;">
			<a href="javascript:void(0);" onclick="window.history.back();"><span class="glyphicon glyphicon-arrow-left"
																				 style="font-size: 20px; color: #DDDDDD"></span></a>
		</div>

		<!-- 大标题 -->
		<div style="position: relative; left: 40px; top: -30px;">
			<div class="page-header">
				<h3>小说-${n.name} <small>作者:${n.authorId}</small></h3>
			</div>
		</div>

		<!-- 详细信息 -->
		<div style="position: relative; top: -70px;">
			<div style="position: relative; left: 40px; height: 30px;">
				<div style="width: 300px; color: gray;">作者</div>
				<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${n.authorId}</b></div>
				<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">小说名</div>
				<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${n.name}</b></div>
				<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
				<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
			</div>

			<div style="position: relative; left: 40px; height: 30px; top: 10px;">
				<div style="width: 300px; color: gray;">所属栏目</div>
				<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${n.novelColumn}</b></div>
				<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">书评</div>
				<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${n.review}</b></div>
				<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
				<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
			</div>
			<div style="position: relative; left: 40px; height: 30px; top: 20px;">
				<div style="width: 300px; color: gray;">小说状态</div>
				<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${n.states}</b></div>
				<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -20px;"></div>
			</div>
			<div style="position: relative; left: 40px; height: 30px; top: 30px;">
				<div style="width: 300px; color: gray;">章节数</div>
				<div style="width: 500px;position: relative; left: 200px; top: -20px;">
					<b>${n.chapterNums}&nbsp;&nbsp;</b></div>
				<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
			</div>
			<div style="position: relative; left: 40px; height: 30px; top: 40px;">
				<div style="width: 300px; color: gray;">页数</div>
				<div style="width: 500px;position: relative; left: 200px; top: -20px;">
					<b>${n.pageNum}&nbsp;&nbsp;</b></div>
				<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
			</div>
			<div style="position: relative; left: 40px; height: 30px; top: 50px;">
				<div style="width: 300px; color: gray;">投票数</div>
				<div style="width: 630px;position: relative; left: 200px; top: -20px;">
					<b>
						${n.voteNum}
					</b>
				</div>
				<div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
			</div>
		</div>

		<div id="chapter" style="height: 600px;margin-top: 20px">
			<form class="form-inline" role="form" style="position: relative;top: 1%; left: 250px;">
				<input type="hidden" id="hidden-chapterId">
				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">章节编号:</div>
						<input type="text" class="form-control" id="chapterId">
					</div>
				</div>
				<button id="searchBtn" type="button" class="btn btn-default">查询</button>
			</form>
			<div class="btn-toolbar" role="toolbar"
				 style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
					<button type="button" class="btn btn-primary" id="addBtn"><span
							class="glyphicon glyphicon-plus"></span> 创建
					</button>
					<button type="button" class="btn btn-default" id="editBtn"><span
							class="glyphicon glyphicon-pencil"></span> 修改
					</button>
					<button type="button" class="btn btn-danger" id="deleteBtn">
						<span class="glyphicon glyphicon-minus"></span> 删除
					</button>
				</div>
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover" style="margin-left: 10px;">
					<thead>
					<tr>
						<th><input type="checkbox" id="qx"/></th>
						<th style="width: 30%">章节名</th>
						<th style="width: 40%">内容</th>
						<th style="width: 30%">创建/更新时间</th>
					</tr>
					</thead>
					<tbody id="chapterBody">
					<%--<tr>
						<td id="s">章节名</td>
						<td>内容</td>
						<td>创建/更新时间</td>
					</tr>--%>
					</tbody>
				</table>
			</div>
			<div style="height: 50px; position: relative;top: 30px;">
				<div id="chapterPage"></div>
			</div>
		</div>

		<div style="height: 200px;"></div>
	</body>
</html>
